<!-- 考勤统计 -->
<template>
  <a-card :bordered="false">
    <vxe-grid
      ref="vxeTable1"
      border
      resizable
      height="530"
      :loading="loading"
      :toolbar-config="tableToolbar"
      :export-config="{}"
      :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
      :columns="tableColumn"
      @toolbar-button-click="toolbarButtonClickEvent"
      @cell-click="cellClick"
      :data="tableData">
      <template v-slot:toolbar_buttons>
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-form-item label="统计月份">
            <a-month-picker v-model="queryParam.month" placeholder="请选择统计月份"></a-month-picker>
          </a-form-item>
          <a-form-item>
            <j-select-user-by-dep v-model="queryParam.acctid"></j-select-user-by-dep>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
          </a-form-item>
        </a-form>
      </template>
      <template v-slot:pager>
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          :current-page.sync="tablePage.currentPage"
          :page-size.sync="tablePage.pageSize"
          :total="tablePage.total"
          @page-change="handlePageChange"
        >
        </vxe-pager>
      </template>

    </vxe-grid>
  </a-card>
</template>
<script >
import moment from 'moment'
import { postActionQs } from '@/api/manage'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
export default {
  name: 'OaSignStatistics',
  components: {
    JSelectUserByDep
  },
  data() {
    return {
      loading: false,
      queryParam: {
        month: ''
      },
      month: '', // 记录当前月份
      tableToolbar: {
        refresh: {
          query: () => {
            this.loadData(1)
          }
        },
        export: true,
        print: true,
        zoom: true,
        // custom: true,
        slots: {
          buttons: 'toolbar_buttons'
        }
      },
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableColumn: [],
      baseTableColumn: [
        { type: 'seq', width: 60 },
        { field: '1', title: '部门', width: 80 },
        { field: '8', title: '姓名', width: 80 },
        { field: '2', title: '工作天数', width: 100 },
        { field: '7', title: '正常打卡', width: 100 },
        { field: '9', title: '迟到天数', width: 100 },
        { field: '6', title: '旷工天数', width: 100 },
        { field: '10', title: '早退天数', width: 100 },
        { field: '3', title: '补卡次数', width: 100 },
        { field: '4', title: '外勤天数', width: 100 },
        { field: '11', title: '出差天数', width: 100 },
        { field: '5', title: '请假次数', width: 100 },
        { field: '12', title: '缺卡次数', width: 100 }
      ],
      otherColumn: [],
      tableData: [],
      url: {
        list: '/wx/cp/oa/getCheckinMonthData',
        list2: '/wx/cp/oa/getCheckinDayData'
      }
    }
  },
  created() {
    this.queryParam.month = moment().format('YYYY-MM')
    this.month = this.queryParam.month
    this.loadData(1)
  },
  methods: {
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.loadData()
    },
    loadData(arg) {
      console.log(arg)
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.tablePage.currentPage = 1
      }
      this.loading = true
      var param = this.getQueryParams()
      postActionQs(this.url.list2, param).then(res => {
        console.log(JSON.stringify(res.result.datas))
        this.loading = false
        this.tablePage.total = 10
        this.tableColumn = res.result.columns
        // this.otherColumn = res.result.columns
        this.tableData = res.result.datas
        this.loadColumn()
      })
    },
    loadColumn() {
      this.$nextTick(() => {
        // this.getTablecolumn()
        this.$refs.vxeTable1.loadColumn(this.tableColumn)
      })
    },
    getTablecolumn() {
      this.tableColumn = this.baseTableColumn.concat(this.otherColumn)
    },
    toolbarButtonClickEvent({ code }) {
      switch (code) {
        case 'myExport':
          this.$refs.xGrid.exportData({
            type: 'csv'
          })
          break
        case 'refresh':
          this.loadData(1)
          break
      }
    },
    searchQuery() {
      this.month = moment(this.queryParam.month).format('YYYY-MM')
      this.loadData(1)
    },
    getQueryParams() {
      // 获取查询条件
      var param = {
        startTime: this.month + '-01',
        endTime: this.month + '-' + moment(this.month).daysInMonth(),
        pageNo: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize,
        'userIdList': 'wangzhen'
        // 'userIdList': this.queryParam.acctid
      }
      return param
    },
    cellClick(data) {
      console.log(data)
    }

  }
}
</script>
